/* ----------------------------- Common components ----------------------------- */

/*Added to fix a glitch in Powe rPages that is adding 16px padding to the list*/
.page-container > span > div[style*="display: block"] {
    padding: 0 !important;
    margin: 0 !important;
}


.pva-embedded-web-chat {
  display: none !important;
}

.sectionBlockLayout { 
    background-color: #EFF0F2 !important; 
    margin-left: 0 !important; 
    padding-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important 
}

.columnBlockLayout {
  background-color: #EFF0F2  !important;
  margin: 5px 10px !important;
  overflow: hidden !important;
  width:90% !important;
}

.custom-grid .columnBlockLayout {
  width: 330px !important;
  max-width: 330px !important;
  flex: 0 0 auto;
}

/*Needed for breadcrumb formatting, has been added to the final CSS file*/
.container-fluid {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box;
  background-color: #EFF0F2;
}

/*Added to fix hover effect on buttons in Home page*/
.btn.button1{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none;
  transition: transform .2s ease;
}
.btn.button1:hover{
  transform: translateY(-4px);
}





/*Used in the 'Load Power BI Report button'*/
.button2{

    font-weight: 600 !important;
    line-height: 100% !important;
    margin: 4px 0px !important;
    min-width: 130px !important; 
    width: fit-content !important; 
    border: 1px solid #858585 !important; 
    padding: 4px 12px 4px 12px !important; 
    margin: 10px auto 0px 0px !important;
    min-height: 32px !important; 
    text-align: center !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content:center !important;
    background-color: white !important;

} 

/*Formatting block for the Create button*/
.custom-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #2350A9;
  background-color: #2350A9;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  width: fit-content;
  margin-bottom: 10px;
}

.custom-btn .icon {
  color: white;
  transition: all 0.3s ease;
}

.custom-btn .label {
  margin-top: -3px;
  color: white;
  transition: all 0.3s ease;
}

.custom-btn:hover {
  background-color: #10244C;
  text-decoration: none;
  border: 1px solid #10244C;
}

.custom-btn:hover .icon {
  color: white;
}

.custom-btn:hover .label {
  color: white;
}

/*To format the breadcrumb*/
.breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-size: 14px;
}

.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5;
}


/* ----------------------------- Network pop-up menu components ----------------------------- */

.modal-content {
    width: 100% !important;
    overflow-x: auto !important;
}

/*Hiding modalTitle*/
.modal-header .modal-title {
    display:none !important;

}

.modal-content table {
    width: 100% ;
    table-layout: auto !important;
}

.modal-content table th,
.modal-content table td {
    width: auto !important; 
    padding: 10px !important;
    text-align: left !important; 
    white-space: nowrap !important; 
    border-bottom: 1px solid #ccc !important;
    min-width: 120px !important;
}

.modal-content .table th {
    font-weight: bolder !important;
    background-color: #6485C7 !important;
    color: white !important;
    padding: 12px !important;
    font-family: 'Poppins', sans-serif !important;
    align-items: center !important;
  
}
/*Format the table rows in the Network popup*/
.modal-content .entity-grid .view-grid .table td {
    background-color: #EFF0F2 !important; 
    padding: 12px !important;
    font-family: 'Poppins', sans-serif !important;
    align-items: center !important;
  
}

.modal-content table tr {
    height: 45px !important;
}

/*To add a border only around the cancel icon in the Network popup*/
.cancel.btn-default  {
  border: 1px solid #EFF0F2 !important;
  border-radius: 4px !important;
  padding: 8.7px 27px !important;
}

/*To remove the border around the search icon in the Network popup*/
.btn-default{
  border: none !important;
}
/*To remove the 'Remove Value' button in the Network popup, unnecessary*/
.btn-default.float-end.remove-value {
 display: none !important;

}

/*Added to force the magnifying glass icon to appear*/
.fa,
.fa::before {
  font-family: FontAwesome !important;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/*Added to force the color of the table header in the pop to be white*/
a, .a {
  color: inherit !important;
}


/* ----------------------------- List components ----------------------------- */
/*Commented out to test a change
.list-actions-aligned {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: fit-content;
  margin-left: auto;
}*/

.list-actions-aligned {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: 0;
}

/*Hides the search box and the name of the views in the list*/
.ms-StackItem.searchBoxContainer-143{
  justify-content: end !important;
  display:none !important;
}

.ms-StackItem {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 10px; 
  background-color: #EFF0F2 !important;
  width: 100% !important 
}

.ms-StackItem span{
  text-align: start;
}

/*Formats the list*/
.ms-DetailsList  table {
  table-layout: fixed !important;
  width: 100%;
  border-collapse: collapse;
  background-color: #f5f5f5;
}
    
.ms-DetailsList .ms-DetailsRow-cell {
  text-align: left ;
  filter: none !important;
  backdrop-filter: none !important;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /*max-width: 300px; Commented out by Saagari to test a change*/
  height: auto !important;
  line-height: 2em;
  overflow: visible !important;
  vertical-align: top;
  font-size: 14px;
  /*width: 191px !important;*/
}

/*Added to fix the 'Actions' column from bleeding out*/
.ms-DetailsRow-cell[data-automation-key="ppNativeListContextualMenu"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: 60px !important;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
}

/*Added to fix the 'Actions' column from bleeding out*/
span[id*="ppNativeListContextualMenu-name"] {
  white-space: nowrap !important;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
}




#id__22-menu li, #id__23-menu li, #id__91-menu li, #id__53-menu li, #id__83-menu li, #id__59-menu li{
  background-color: transparent !important;
}


/* EDIT */
ul.ms-ContextualMenu-list > li.ms-ContextualMenu-item
  > button.ms-ContextualMenu-link[aria-label="Edit"] {
  background-color: rgba(35, 80, 169, 0.08);
  width: 100%;                 /* ensure full-row fill */
  display: block;              /* guard against inline baseline gaps */
}

ul.ms-ContextualMenu-list > li.ms-ContextualMenu-item
  > button.ms-ContextualMenu-link[aria-label="Edit"] .ms-ContextualMenu-linkContent :is(i, .ms-ContextualMenu-itemText) {
  color: #2350A9 !important;
}

/* DELETE */
ul.ms-ContextualMenu-list > li.ms-ContextualMenu-item
  > button.ms-ContextualMenu-link[aria-label="Delete"] {
  background-color: rgba(231, 29, 54, 0.08);
  width: 100%;
  display: block;
}

ul.ms-ContextualMenu-list > li.ms-ContextualMenu-item
  > button.ms-ContextualMenu-link[aria-label="Delete"] .ms-ContextualMenu-linkContent :is(i, .ms-ContextualMenu-itemText) {
  color: #E71D36 !important;
}

/* Fluent/Office UI often overrides on hover/focus; match those too */
ul.ms-ContextualMenu-list > li.ms-ContextualMenu-item
  > button.ms-ContextualMenu-link[aria-label="Edit"]:is(:hover,:focus,:active) {
  background-color: rgba(35, 80, 169, 0.12);
}

ul.ms-ContextualMenu-list > li.ms-ContextualMenu-item
  > button.ms-ContextualMenu-link[aria-label="Delete"]:is(:hover,:focus,:active) {
  background-color: rgba(231, 29, 54, 0.12);
}


.cellSizerStart-199{
  display: none !important;
}

/*Added to align out the first letter of the header and first letter of the row*/
.cellTitle-215 {
  padding: 0px 8px 0px 18px !important;
}

/*Formats the list section*/
.ms-Viewport{
  width: 100% !important;
  overflow-y: visible !important;
}

/*Formats the header section's container*/
.ms-DetailsList-headerWrapper{
  top: 0px !important;
}

.ms-DetailsHeader{
  background-color: #e1eaf8 !important;
  border: 1px solid #EFF0F2;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: start !important;
}

.ms-DetailsList .ms-DetailsHeader-cell {
  white-space: normal !important;
  text-align: left !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /*max-width: 300px; Commented out by Saagri to test a change*/
  line-height: 2em;
  padding: 12px 18px !important;
  overflow: visible !important;
  vertical-align: top;
  font-weight: normal;
  color: #070C2D;
  font-size: 12px;
  background-color: transparent;
  border: none;
  /* width: 191px !important; Commented out by Saagari to test a change*/
}


/*Targets column headers*/
.ms-DetailsList .ms-DetailsHeader-cell > * {
  display: flex !important;
  align-items: center !important;
  justify-content: start !important;
  height: 100%;
  text-align: left !important;
  margin-left: 0px !important;
  /*margin-left: 18px !important; Commented out by Saagari to fix the list*/
}

/*Formats the list's header*/
.ms-DetailsHeader-cellName{
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

/*Formats the row with data in a list*/
.ms-DetailsRow {
  background: #fff !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 12px 0 rgba(60, 72, 100, 0.10) !important;
  border: none !important;
  transition: box-shadow 0.2s !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #EFF0F2 !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Row hover effect for subtle lift */
.ms-DetailsRow:hover {
  /*Commenting to test out a change box-shadow: 0 4px 20px 0 rgba(60, 72, 100, 0.16) !important;*/
  box-shadow: 0 4px 20px 0 rgba(60, 72, 100, 0.3) !important;
}

/*Formats the cell containing data*/
.ms-DetailsRow-cell {
  font-size: 14px !important;
  color: #464748 !important;
  padding: 12px 18px !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Remove default row border and spacing issues */
.ms-DetailsRow-fields {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Remove focus outlines for cleaner look */
.ms-DetailsRow:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Responsive: horizontal scroll for overflow */
.ms-DetailsList-contentWrapper {
  overflow-x: auto !important;
  width: 100%;
}

/*Styles scrollbards in Webkit browsers*/
.ms-DetailsList-contentWrapper::-webkit-scrollbar {
  height: 0 !important;
  background: transparent !important;
}

/*Formats the button label*/
.ms-Button-label{
  font-weight: 400;
}

.ms-FocusZone{
  padding: 0;
}


/* ----------------------------- Power BI iFrame component ----------------------------- */

/* Iframe wrapper */
.portal-pbi-embedded {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* The iframe itself */
.powerbi iframe {
  width: 100% !important;
  height: 90vh !important;
  border: none !important;
  margin: 0 !important;
  display: block;
}

/* Outer container holding iframe */
#reportContainer {
  margin: 0 !important;
  padding-left: 0px !important;
  height: auto !important;
  overflow: hidden !important;
}

/* ----------------------------- Form components ----------------------------- */

.entity-form, .crmEntityFormView {
    display: flex;
    flex-direction: column;
    display:block;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}


.entity-form input:focus,
.entity-form select:focus,
.entity-form textarea:focus
{
  
    border: #aab0e0 solid ;
	  color: #374397;
    text-align: left;
    text-wrap: wrap;
}


.entity-form .section-title h3,
.crmEntityFormView .section-title h3 {

    font-size:15px !important;
    background-color: #6485C7 !important;
    color: white !important;
    width:100%;
    margin-top: 2px;
    margin-bottom: 5px;
    padding: 5px 5px !important;
    border-radius: 8px;
    margin-bottom: 6px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif !important;

}


.entity-form .tab-title,
.crmEntityFormView .tab-title {
    background-color: #6485C7 !important;
    color: white !important;
    text-align: left;
    padding: 9px 15px !important;
    height: auto;
    margin-top: 5px;
    border-radius: 8px;
    margin-bottom: 4px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif !important;
}


.entity-form legend {
    margin-bottom: 2px !important;
}


.entity-form .tab .clearfix {
    margin-top: 0px !important;
    margin-bottom: 1rem !important; 
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    align-items: center;
    gap: 20px !important;

}


.entity-form .section {
    margin-top: 0px !important;
    margin-bottom: 0px !important;

}

.entity-form .tab {
    border: none;
    margin-bottom: 13px;
    border-radius: 8px;
    margin-top: 5px !important;
}


.entity-form table {
    margin-bottom: 0px !important;
}

.entity-form div:empty {
    display: none !important;
}


.entity-form{
  padding: 9px 13px !important;
  border-radius: 16px;
}

.crmEntityFormView{
  border-radius: 16px;
}

.crmEntityFormView .cell{
  padding: 0 0px 20px !important;
}

.crmEntityFormView {
  background-color: white  !important;
}


.field-label{
  color: #070C2D !important;
  font-size: 14px;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  margin-bottom: 4px;
  background-color: #EFF0F2 !important;
}

span{
  font-family: 'Poppins', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, li, span, p{
  font-family: 'Poppins', sans-serif !important;

}

/*Formats the 'Notes' field's input area*/
textarea{
  min-height: 113px !important;
}


/*Needed as tab_4 in Physio and SLT forms need to be formatted; Find another way to do this*/
[data-name="tab_4"]{
  display: flex;
  gap: 20px;
  background-color: #EFF0F2;
  padding: 0 10px !important; /*Added by Saagari to avoid the redudant blocks of padding */
}

/*Added by Saagari to avoid redundant settings */
[data-name="tab_4"] .tab-column {
  width: 100% !important;
  padding-left: 0px !important;
} 

/*Formats .tab-column; Need to see if this is required*/
html[dir=ltr] .crmEntityFormView .tab .tab-column{
  padding-left: 0px !important;
}

/*Formats the elements in the form*/
.form-control{
  border: 1px solid #EFF0F2 !important;
  height: 40px !important;
  border-radius: 8px !important;
  color: #86929E !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Poppins', sans-serif !important;
}

/*To format the magnifying glass button used in the Network lookup field*/
.launchentitylookup{
  background-color: transparent !important;
  border: none !important;
  margin-top: 7px !important;
  margin-left: -50px !important;
}


.crmEntityFormView .tab .tab-column{
  margin-bottom: 0px !important;
}

.crmEntityFormView fieldset,
.entity-form fieldset{
  background-color: #EFF0F2 !important;
  padding: 11px 10px;
  border-radius: 8px;
  margin-bottom: 0px !important; /*Added by Saagari to reduce the margin in tab_3*/
  margin-top: 2px !important; /*Clubbing styling from .entity-form .fieldset with .crmEntityFormView .fieldset to test a change*/
  align-items: start;/*Clubbing styling from .entity-form .fieldset with .crmEntityFormView .fieldset to test a change*/
}

/*Required to format the 'Report Details tab*/
[data-name="tab_2"] .tab-column {
  /*Commented out to test a change width: 100% !important;*/
  padding: 0;
  margin: 0;

}
/*Required to format the 'Report Details tab*/
/* First two fields: 20% each */
[data-name="tab_2"] .tab-column:nth-of-type(1),
[data-name="tab_2"] .tab-column:nth-of-type(2) {
  flex: 0 0 20%;
  max-width: 20%;
}
/*Required to format the 'Report Details tab*/
/* Last field container: 60% */
[data-name="tab_2"] .tab-column:nth-of-type(3) {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  gap: 10px;
}
/*Required to format the 'Report Details tab*/
/*Distribute the space evenly*/
[data-name="tab_2"] .tab-column:nth-of-type(3) > div {
  flex: 1;
}

/*Added to fix an issue with tab_3*/
[data-name="tab_3"]{
  flex-direction: column;
  background-color: #EFF0F2;
  margin-bottom: 0px !important;
}


/*Needed for responsiveness*/
@media (min-width: 768px) {
  /*[data-name="tab_2"] .tab-column:last-of-type > div {
    flex-direction: row;
  }Commented to test out a change*/

  [data-name="tab_3"]{
    flex-direction: row;
  }
}

/*To fix a messed up a layout*/
.entity-form .tab.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/*Needed for responsiveness*/
@media (min-width: 768px) {
  [data-name="tab_4"] {
    flex-direction: row;
    padding-right: 0px !important;
    gap: 20px;
  }
}


.crmEntityFormView .actions{
  display: flex;
  justify-content: end;
  margin-top: 150px;
}



.btn-primary{
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 8.7px 27px !important;
  background-color: #2350A9 !important; /*Added to test a change*/
}

.actions .btn-primary{
  margin-right: 10px !important;
}

.btn-primary:hover{
  background-color: #10244C !important;
  border-color: #10244C !important;
  color: white !important;
}

[data-name^="tab_2_section_"] tbody tr td:nth-child(1) .control {
  margin-bottom: 60px !important;
  width: 97%;
}

@media (min-width: 768px) {
  [data-name^="tab_2_section_"] tbody tr td:nth-child(1) .control {
    margin-bottom: 0px !important;
  }
}

/*To format the breadcrumb */
body .breadcrumb {
  background-color: #EFF0F2 !important;
  /*Commented out by Saagari to test a change padding: 3px 5px !important;*/
  /*Commented out by Saagari to test a change border-radius: 8px !important;*/
  overflow: hidden !important ;
}



/*Moved here from form-level CSS*/
.entity-form, .crmEntityFormView{
  border: none;
}

/*Formats the section with Submit button*/
.actions{
  margin-top: 0px !important;
  width: 100%;
  border: none !important;
}


h1{
  color: #070C2D !important;
  font-size: 18px;
  font-family: 'Poppins' !important;
  font-weight: 500;
}

/*For responsiveness*/
.ms-Stack[class^="root-"],
.ms-Stack[class*=" root-"] {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  max-height: 600px;
  overflow: auto !important;
}

@media (min-width: 1164px) {
  .ms-Stack[class^="root-"],
  .ms-Stack[class*=" root-"] {
    overflow: inherit !important;
  }
}

/*To format toolbar/command bar menus or dropdowns in grids, lists*/
/*commenting out to test a change
.css-165{
  width: fit-content;
}*/

.ms-OverflowSet-item.ms-CommandBar-secondaryCommand:nth-of-type(2) {
  display: none;
}

.ms-FocusZone.css-150.ms-ContextualMenu.is-open.ms-BaseButton-menuhost.root-251{
  min-width: 110px;
}

.ms-FocusZone.css-150.ms-ContextualMenu.is-open.ms-BaseButton-menuhost.root-253{
  min-width: 110px;
}

button[aria-label="Action Menu"] {
    border: 0px !important;
}

button[aria-label="Action Menu"]:hover {
    background-color: transparent !important;
}

h4{
  color: #070C2D !important;
}

::placeholder {
  color: #86929E !important;
}

/* Edge 12-18 */
/*Formatting for elements in older browsers*/

::-ms-input-placeholder { 
  color: #86929E !important;
}

.ms-Callout.ms-ContextualMenu-Callout{
  border-radius: 10px !important;
  overflow: hidden;
}

.ms-ContextualMenu-list.is-open{
  background-color: white !important;
}

button[aria-label="Edit"]:hover,
button[aria-label="Delete"]:hover {
  border-radius: 5px !important;
}

.ms-ContextualMenu-link:hover{
  border-radius: 5px !important;
}

[aria-label="Network Clear lookup field"]{
  display: none !important;
}

.ms-DetailsList{
  width: fit-content !important;
}


/* ----------------------------- Pop-up Form components ----------------------------- */

/*Added to test a change*/
.modal-content {
    background-color: #f6f6f8 !important; 
}



.ms-Modal {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    position: fixed !important;
    background-color: #f6f6f8 !important;
}

.ms-Dialog-main {
    width: 100% !important;
    height: 100% !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #f6f6f8 !important;
}


.ms-Modal-scrollableContent {
    flex-grow: 1 !important;
    height: calc(100% - 50px) !important;
    overflow-y: auto !important;
    background-color: #f6f6f8 !important;
}

/*Added to test the expansion of the pop-up form*/
.ms-Modal-scrollableContent .ms-Stack.css-165 {
    height: 90% !important;
    width: 95% !important;
}

.modal-lg.modal-dialog {
    width: 70vw !important;
    max-width: 1500px !important;
    height: 100%;
    max-height:500px !important;
}

.ms-StackItem {
    text-align: center !important; 

}

/*Formatting the close button*/
.ms-Modal-scrollableContent .ms-Stack .ms-Stack .ms-StackItem {
  justify-content: end !important;
  background-color: #f6f6f8 !important;

}

/*To make the background colour uniform*/
.ms-Modal-scrollableContent .ms-Stack .ms-Stack .ms-StackItem iframe {
  background-color: #f6f6f8 !important; 
}

#modalTitle {
  /*Commenting out the form title
    background-color: #374397 !important;
    padding: 5px, 20px !important;
    color:white !important;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    font-weight: 700; 
    font-size: 20px; 
    box-sizing: border-box !important;
    padding: 10px 20px !important; */
    /*letter-spacing: 3px;*/
    display : none !important;
}

.ms-Dialog .ms-StackItem:has(> #modalIframe),
.ms-Dialog .ms-StackItem:has(> iframe[title="Edit record"]) {
  background-color: #f6f6f8 !important;  
}


.ms-Dialog-main:has(#modalIframe) .ms-Modal-scrollableContent {
  background: #f6f6f8  ;     
  padding: 0 !important;       
}


.ms-Dialog-main:has(#modalIframe) .ms-StackItem {
  padding: 24px;               
  background: #f6f6f8;       
}


.modal-content {
    width: 100% !important;
    overflow-x: auto !important;
}

.model-header .modal-title {
    text-align: center;

}

.modal-content table {
    width: 100% ;
    table-layout: auto !important;
}

.modal-content table th,
.modal-content table td {
    width: auto !important; 
    padding: 10px !important;
    text-align: left !important; 
    white-space: nowrap !important; 
    border-bottom: 1px solid #ccc !important;
    min-width: 120px !important;
}